import React, { useState } from 'react';
import { connect } from 'umi';
import { Avatar, Menu } from 'antd';
import { LikeOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
import ProLayout, { PageContainer, SettingDrawer } from '@ant-design/pro-layout';

import ModuleA from './moduleA'

const { SubMenu } = Menu;

// 不使用 Layout 插件的时候的布局
const Index = (props) => {
    const { auth, history, dispatch, children } = props

    if (!auth.authorized) {
        history.push('/auth')
    }

    return (
        <div
            style={{
                height: '100vh',
            }}
        >
            {/* <ProLayout
                title="AnxinCloud 4.0"
                navTheme='light'
                fixSiderbar
                fixedHeader
                rightContentRender={() => (
                    <div>
                        <Menu mode="horizontal" onClick={(item) => {
                            if (item.key == 'logout') {
                                sessionStorage.clear()
                                dispatch({ type: 'auth/logout' })
                                history.push('/auth')
                            }
                        }}>
                            <SubMenu
                                key="SubMenu"
                                icon={<Avatar shape="square" size="small" icon={<UserOutlined />} />}
                                title={auth.displayName}
                            >
                                <Menu.Item key="option">Option</Menu.Item>
                            </SubMenu>
                            <Menu.Item key="logout"><LogoutOutlined /></Menu.Item>
                        </Menu>
                    </div>
                )}
            >
                <PageContainer
                    content={<span>test</span>}
                >
                    <div
                        style={{
                            height: '100%',
                        }}
                    >
                        {children}
                    </div>
                </PageContainer>
            </ProLayout> */}
        </div>
    )
}

export default connect(({ auth, loading }) => {
    return {
        auth,
        loading: loading.global
    }
})(Index);